<template>
  <div>
    <div style="width:100%;display:flex">
      <el-card class="card1" style="width:40%">
        <el-form :model="form" :inline="true" size="small">
          <el-form-item label="使用单位" label-width="100px">
            <el-input v-model="form.useOrgName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getuseData" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="card1" style="margin-left:15px;width:60%">
        <el-form :model="form" :inline="true" size="small">
          <el-form-item label="设备注册代码" label-width="100px">
            <el-input v-model="form.eleCode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="有无物联网电梯" label-width="100px">
            <el-select v-model="form.isIot" placeholder="请选择" clearable>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="geteleData(useOrgId)" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <div style="display:flex">
      <el-card class="card2">
        <div slot="header" class="clearfix">
          <span>使用单位列表</span>

        </div>
        <div class="text">
          <p style="font-weight:800">电梯总数: <span style="color:red">{{eleTotal}}</span> 物联网电梯数: <span style="color:red">{{iotEleTotal}}</span></p>
          <el-table :data="userData" style="width: 100%" :header-cell-style="{
      fontWeight:800}">
            <el-table-column label="单位" show-overflow-tooltip width="240">
              <template slot-scope="scope">
                <el-button type='text' @click="selectOrg(scope.row.useOrgId)">
                  {{scope.row.orgName}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="maintEleTotal" label="梯数">
            </el-table-column>
            <el-table-column prop="eleIotTotal" label="物联网电梯数">
            </el-table-column>
          </el-table>
          <el-pagination @size-change="usehandleSizeChange" @current-change="usehandleCurrentChange" :current-page.sync="usepagination.pageNum"
            :page-size="usepagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="usepagination.pageTotal">
          </el-pagination>
        </div>
      </el-card>
      <el-card class="card3">
        <div slot="header" class="clearfix">
          <span>电梯信息列表</span>
        </div>
        <div class="text">
          <el-table :data="eleData" style="width: 100%" :header-cell-style="{
      fontWeight:800}">
            <el-table-column label="设备注册代码" prop="eleCode" width="200">
            </el-table-column>
            <el-table-column prop="isIot" label="有无物联网数据">
            </el-table-column>
            <el-table-column prop="dataTime" label="数据时间">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size='small' @click="showDailog(scope.row.eleCode)">
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="elehandleSizeChange" @current-change="elehandleCurrentChange" :current-page.sync="elepagination.pageNum"
            :page-size="elepagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="elepagination.pageTotal">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <el-dialog title="运行数据" :visible.sync="dialogVisible" width="58%" :before-close="handleClose">
      <div class="colum-box-monitor">
        <div class="monitor">
          <div class="elevator-box">
            <img src="@/assets/left.jpg" alt="" class="leftimg">
            <div v-if="normal">
              <img src="@/assets/leftdoor.jpg" alt="" class="door_l">
              <img src="@/assets/leftdoor.jpg" alt="" class="door_r">
            </div>
            <div v-else>
              <img src="@/assets/leftdoor.jpg" alt="" :class="status=='open'?'opendoor_l':'closedoor_l'">
              <img src="@/assets/leftdoor.jpg" alt="" :class="status=='open'?'opendoor_r':'closedoor_r'">
            </div>

          </div>
          <div class="info">
            <div class="first_box">
              <table style="width:100%">
                <tr>
                  <td>设备代码:</td>
                  <td>{{staticData.eleCode}}</td>
                  <td>使用单位:</td>
                  <td>{{staticData.useOrgName}}</td>
                </tr>
                <tr>
                  <td>设备地址:</td>
                  <td>{{staticData.eleUseCommunity}}</td>
                  <td>维保单位:</td>
                  <td>{{staticData.maintOrgName}}</td>
                </tr>
                <tr>
                  <td>检验单位:</td>
                  <td>{{staticData.checkOrgName}}</td>
                  <td>下次检验日期:</td>
                  <td>{{staticData.eleNextChecktime}}</td>
                </tr>
              </table>
            </div>
            <div class="second_box">
              <table style="width:100%">
                <tr>
                  <td>轿厢运行状态:</td>
                  <td>{{dynamicData.carstatus}}</td>
                  <td>方向:</td>
                  <td>{{dynamicData.direction}}</td>
                </tr>
                <tr>
                  <td>当前物理楼层:</td>
                  <td>{{dynamicData.floor}}</td>
                  <td>累计运行:</td>
                  <td>{{dynamicData.hours}}</td>
                </tr>
                <tr>
                  <td>数据状态:</td>
                  <td>{{dynamicData.isActive}}</td>
                  <td>是否在线:</td>
                  <td>{{dynamicData.isOnline}}</td>
                </tr>
                <tr>
                  <td>轿厢是否在门区:</td>
                  <td>{{dynamicData.iszone}}</td>
                  <td>总接触器吸合或是断开:</td>
                  <td>{{dynamicData.maincontactor}}</td>
                </tr>
                <tr>
                  <td>轿厢内是否有人:</td>
                  <td>{{dynamicData.passenger}}</td>
                  <td>上极限是否动作:</td>
                  <td>{{dynamicData.uplimit}}</td>
                </tr>
              </table>
            </div>
            <div class="three_box">
              <h3>电梯状况</h3>
              <div class="box1">
                <div>
                  <img src="@/assets/wu.png" alt="">
                  <span>离线</span>
                </div>
                <div>
                  <img src="@/assets/zheng_g.png" alt="">
                  <span>正常</span>
                </div>
                <div>
                  <img src="@/assets/ding_g.png" alt="">
                  <span>定期维保</span>
                </div>
                <div>
                  <img src="@/assets/bao.png" alt="">
                  <span>未投保</span>
                </div>
              </div>
              <div class="box2">
                <div>
                  <img src="@/assets/zhang.png" alt="">
                  <span>正常</span>
                </div>
                <div>
                  <img src="@/assets/su.png" alt="">
                  <span>无投诉</span>
                </div>
                <div>
                  <img src="@/assets/xun.png" alt="">
                  <span>未巡查</span>
                </div>
                <div>
                  <img src="@/assets/jiu.png" alt="">
                  <span>无困人</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getseletEleIotRunDataListUseOrg, getseletEleIotRunDataListEle, getqueryEleInfo, getqueryIotRunData } from '@/api/webofthings'
export default {
  data () {
    return {
      normal: false,
      status: 'open',
      showDoor: true,
      dialogVisible: false,
      options: [
        {
          value: 0,
          label: '无'
        },
        {
          value: 1,
          label: '有'
        }
      ],
      usepagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      elepagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      userData: [],
      eleData: [

      ],
      form: {

      },
      timer: '',
      eleTotal: '',
      iotEleTotal: '',
      useOrgId: '',
      formLabelWidth: '110px',
      staticData: {},
      dynamicData: {}
    }
  },
  mounted () {
    this.getuseData()
  },
  destroyed () {
    //离开页面是销毁
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    handleClose () {
      this.dialogVisible = false
      clearInterval(this.timer)
      this.timer = null
    },
    // 点击使用单位列表
    selectOrg (useOrgId) {
      this.useOrgId = useOrgId
      this.geteleData(this.useOrgId)
    },
    //获取使用单位分页数据
    getuseData () {
      const query = {
        useOrgName: this.form.useOrgName,
        pageNum: this.usepagination.pageNum,
        pageSize: this.usepagination.pageSize,
      }
      getseletEleIotRunDataListUseOrg(query).then(res => {
        if (res.data.code == 200) {
          this.userData = res.data.data.useOrgInfo.page.list
          this.usepagination.pageTotal = res.data.data.useOrgInfo.page.total
          this.eleTotal = res.data.data.useOrgInfo.eleTotal
          this.iotEleTotal = res.data.data.useOrgInfo.iotEleTotal
          this.useOrgId = this.userData[0].useOrgId
          this.geteleData(this.useOrgId)
        }
      })
    },
    //获取电梯分页数据
    geteleData (useOrgId) {
      const query = {
        useOrgId: useOrgId,
        eleCode: this.form.eleCode,
        factoryNo: this.form.factoryNo,
        isIot: this.form.isIot,
        pageNum: this.elepagination.pageNum,
        pageSize: this.elepagination.pageSize,
      }
      getseletEleIotRunDataListEle(query).then(res => {
        if (res.data.code == '200') {
          this.eleData = res.data.data.eleIotInfoPage.list
          this.elepagination.pageTotal = res.data.data.eleIotInfoPage.total
        }
      })
    },
    showDailog (eleCode) {
      this.dialogVisible = true
      this.realTime(eleCode)
    },
    // 获取实时数据
    realTime (eleCode) {
      const query = {
        eleCode: eleCode
      }
      getqueryEleInfo(query).then(res => {
        console.log(res)
        if (res.data.code == '200') {
          this.staticData = res.data.data
        }
      })
      this.timer = window.setInterval(() => {
        getqueryIotRunData(query).then(res => {
          console.log(res)
          if (res.data.code == '200') {
            this.dynamicData = res.data.data
          }
        })
      }, 2000)

    },
    usehandleSizeChange (val) {
      this.usepagination.pageNum = 1
      this.usepagination.pageSize = val
      this.getuseData()
    },
    usehandleCurrentChange (val) {
      this.usepagination.pageNum = val
      this.getuseData()
    },
    elehandleSizeChange (val) {
      this.elepagination.pageNum = 1
      this.elepagination.pageSize = val
      this.geteleData(this.useOrgId)
    },
    elehandleCurrentChange (val) {
      this.elepagination.pageNum = val
      this.geteleData(this.useOrgId)
    },
  }
}

</script>
<style lang="less" scoped>
.el-pagination {
  margin-top: 5px;
  text-align: right;
}
.card1 {
  margin-bottom: 15px;
  ::v-deep .el-input__inner {
    width: 160px;
  }
  ::v-deep .el-form-item__label {
    font-weight: 800;
  }
}
::v-deep .el-card__header {
  background: #f9f9f9;
  .clearfix {
    font-weight: 800;
  }
}

.card2 {
  width: 40%;
  margin-right: 15px;
}
.card3 {
  width: 60%;
  .text {
    ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
      z-index: 2;
    }
    ::v-deep .el-table__fixed::before {
      height: 0px;
    }
  }
}
::v-deep .el-dialog__header {
  padding: 10px 20px 10px;
}
::v-deep .el-dialog__body {
  padding: 0px;
  .colum-box-monitor {
    font-size: 14px;
    .monitor {
      background: #fff;
      border-top: 4px #49afef solid;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .elevator-box {
        margin-left: 10px;
        margin-top: 12px;
        margin-bottom: 20px;
        position: relative;
        .door_l {
          position: absolute;
          left: 43px;
          top: 90px;
          display: flex;
        }
        .opendoor_l {
          position: absolute;
          left: 43px;
          top: 90px;
          display: flex;
          animation: open_l 3s;
          animation-fill-mode: forwards;
        }
        .closedoor_l {
          position: absolute;
          left: 43px;
          top: 90px;
          display: flex;
          animation: close_l 3s;
          animation-fill-mode: forwards;
        }
        @keyframes open_l {
          from {
            width: 83px;
            height: 231px;
          }
          to {
            width: 0px;
            height: 231px;
          }
        }
        @keyframes close_l {
          from {
            width: 0px;
            height: 231px;
          }
          to {
            width: 83px;
            height: 231px;
          }
        }
        .door_r {
          position: absolute;
          left: 126px;
          top: 90px;
          display: flex;
        }
        .opendoor_r {
          position: absolute;
          left: 126px;
          top: 90px;
          display: flex;
          animation: open_r 3s;
          animation-fill-mode: forwards;
        }
        .closedoor_r {
          position: absolute;
          left: 126px;
          top: 90px;
          display: flex;
          animation: close_r 3s;
          animation-fill-mode: forwards;
        }
        @keyframes open_r {
          from {
            left: 126px;
            width: 83px;
            height: 231px;
          }
          to {
            left: 209px;
            width: 0px;
            height: 231px;
          }
        }
        @keyframes close_r {
          from {
            left: 209px;
            width: 0px;
            height: 231px;
          }
          to {
            left: 126px;
            width: 83px;
            height: 231px;
          }
        }
      }
      .info {
        width: 66%;
        color: black;
        margin-left: 20px;
        margin-right: 10px;
        margin-top: 10px;
        .first_box {
          border-bottom: #cccccc 1px solid;
          td:nth-child(1) {
            width: 12%;
          }
          td:nth-child(2) {
            width: 38%;
          }
          td:nth-child(3) {
            width: 12%;
          }
          td:nth-child(4) {
            width: 38%;
          }
        }
        .second_box {
          border-bottom: #cccccc 1px solid;
          td:nth-child(1) {
            width: 25%;
          }
          td:nth-child(2) {
            width: 25%;
          }
          td:nth-child(3) {
            width: 25%;
          }
          td:nth-child(4) {
            width: 25%;
          }
        }
        .three_box {
          h3 {
            margin-top: 20px;
          }
          .box1 {
            display: flex;
            div {
              margin: 15px 35px;
              display: flex;
              flex-direction: column;
              text-align: center;
              span {
                margin-top: 5px;
              }
            }
          }
          .box2 {
            display: flex;
            div {
              margin: 0 35px;
              display: flex;
              flex-direction: column;
              text-align: center;
              span {
                margin-top: 5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
